<template>
  <view class="container">
    <!-- 景点标题 -->
    <view class="header">
      <text class="title">闽江夜游</text>
    </view>
    
    <!-- 主要内容区域 -->
    <scroll-view scroll-y class="content">
      <!-- 景点图片 -->
      <view class="main-image">
        <image src="/static/scenicspot/fj.jpg" mode="aspectFill"></image>
      </view>
      
      <!-- 景点描述 -->
      <view class="description">
        <text class="desc-title">景点简介</text>
        <text class="desc-content">闽江夜游是福州独特的旅游项目，游客可以乘坐游船在闽江上欣赏福州的夜景。闽江是福建省最大的河流，也是福州的母亲河，流经福州城区，将福州分为南北两岸。夜晚的闽江灯火璀璨，两岸的高楼大厦霓虹灯闪烁，景色十分迷人。</text>
        
        <text class="desc-content">闽江夜游航线主要从台江码头出发，途经解放大桥、闽江大桥、鳌峰大桥等多座桥梁，游客可以近距离欣赏这些桥梁的夜景。沿途还可以看到福州的标志性建筑，如福州电视塔、海峡国际会展中心等。</text>
        
        <text class="desc-content">闽江夜游是体验福州现代城市魅力的最佳方式之一。在游船上，游客可以一边欣赏夜景，一边品尝福州特色小吃，感受福州的夜晚风情。特别是在节假日，闽江两岸还会有灯光秀表演，为游客带来更加精彩的视觉体验。</text>
      </view>
      
      <!-- 景点特色 -->
      <view class="features">
        <text class="section-title">景点特色</text>
        
        <view class="feature-list">
          <view class="feature-item">
            <text class="feature-icon">🌃</text>
            <text class="feature-text">璀璨夜景</text>
          </view>
          <view class="feature-item">
            <text class="feature-icon">🌉</text>
            <text class="feature-text">桥梁景观</text>
          </view>
          <view class="feature-item">
            <text class="feature-icon">🚢</text>
            <text class="feature-text">豪华游船</text>
          </view>
          <view class="feature-item">
            <text class="feature-icon">🎆</text>
            <text class="feature-text">灯光秀表演</text>
          </view>
        </view>
      </view>
      
      <!-- 参观信息 -->
      <view class="visit-info">
        <text class="section-title">参观信息</text>
        
        <view class="info-item">
          <text class="info-label">开放时间：</text>
          <text class="info-content">19:30-21:30（具体时间以当日公告为准）</text>
        </view>
        <view class="info-item">
          <text class="info-label">门票价格：</text>
          <text class="info-content">普通船票100元/人，豪华船票150元/人</text>
        </view>
        <view class="info-item">
          <text class="info-label">游览时长：</text>
          <text class="info-content">约1小时</text>
        </view>
        <view class="info-item">
          <text class="info-label">上船地点：</text>
          <text class="info-content">台江旅游码头（福州市台江区江滨中大道）</text>
        </view>
        <view class="info-item">
          <text class="info-label">交通方式：</text>
          <text class="info-content">乘坐公交10、13、15、25、312路等到台江码头站下车</text>
        </view>
        <view class="info-item">
          <text class="info-label">注意事项：</text>
          <text class="info-content">建议提前30分钟到达码头，准备好有效证件</text>
        </view>
      </view>
      
      <!-- 底部间距 -->
      <view style="height: 40rpx;"></view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      
    }
  },
  methods: {
    
  }
}
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f8f8f8;
}

.header {
  padding: 30rpx;
  text-align: center;
  background-color: #1A5F7A;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.title {
  font-size: 48rpx;
  font-weight: bold;
  color: #fff;
}

.content {
  flex: 1;
}

.main-image {
  width: 100%;
  height: 400rpx;
  overflow: hidden;
}

.main-image image {
  width: 100%;
  height: 100%;
}

.description {
  padding: 40rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
}

.desc-title {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.desc-content {
  display: block;
  font-size: 32rpx;
  color: #666;
  line-height: 1.8;
  margin-bottom: 20rpx;
}

.features {
  padding: 40rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
}

.section-title {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
}

.feature-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30rpx;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 20rpx;
  background-color: rgba(26, 95, 122, 0.05);
  padding: 20rpx;
  border-radius: 10rpx;
}

.feature-icon {
  font-size: 48rpx;
}

.feature-text {
  font-size: 28rpx;
  color: #333;
}

.visit-info {
  padding: 40rpx;
  background-color: #fff;
}

.info-item {
  display: flex;
  margin-bottom: 20rpx;
  line-height: 1.6;
}

.info-label {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
  width: 180rpx;
}

.info-content {
  font-size: 32rpx;
  color: #666;
  flex: 1;
}
</style>